<template>
	<view>
		<view @click="open" class="flex-direction margin-lr-sm">
			<slot name="label" v-bind="{ selectItems }">
			  <view v-if="showSelectItem" class="flex align-center justify-between">
				  <view class="margin-right-xs text-gray" v-if="!selectItems.length">
					  {{ placeholder }}
				  </view>
				  <template v-else>
					<view class="flex-wrap">
						<view 
						class='cu-tag round light' 
						v-for="(item,index) in selectItems"
						:class="'bg-' + item.colorType">{{item.label}}</view>
					</view>
				  </template>
				  <view>
					<uni-icons v-if="clearable && selectItems.length" class="content-clear-icon" type="clear" :size="24"
					color="#c0c4cc" @click.native.stop="onClear"></uni-icons>
				  	<uni-icons type="right" size="20" color="#8799a3"></uni-icons>
				  </view>
			  </view>
			</slot>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup">
				<view class="bg-white padding-top bottom-popup">
					<view class="bg-white padding-sm text-center solid-bottom text-lg text-black flex">
						<view class="response">
							{{placeholder}}
						</view>
						<view @click="close" class="fr round" style="background-color: #F2F2F2;width: max-content;padding-left: 10rpx;padding-right: 10rpx; padding-top: 5rpx;">
								<uni-icons type="closeempty" size="15" color="#666666"></uni-icons>
						</view>
					</view>
					<view class="content" :style="contentStyles">
						<view class="cu-bar search margin-top-sm bg-white">
							<view class="search-form round padding-lr" style="background-color: #F2F2F2;height: 40px;">
								<input style="height: 40px;" v-model="searchValue" :adjust-position="false" type="text" placeholder="请搜索"></input>
								<uni-icons class="margin-left-xs" type="search" size="19"></uni-icons>
							</view>
						</view>
						<view class="margin-top-sm">
							<scroll-view scroll-y="true" :style="listStyles">
								<view class="padding-bottom">
									<view class="bg-white">
										<view v-for="(item,index) in dictData" @click="select(item)">
											<uni-list-item clickable>
												<template v-slot:body>
													<view v-if="item.label.includes(searchValue) || !searchValue" class="text-center text-lg text-black flex response">
														<view class="margin-right-lg" v-if="multiple">					
															<checkbox class="blue" :class="selectItemsMapValue.includes(item.value) ? 'checked' : ''" style="transform:scale(0.7)"></checkbox>
														</view>
														<view class="flex flex-sub justify-between">
															<view>
																<view class='cu-tag round light' :class="'bg-' + item.colorType">{{item.label}}</view>
															</view>
															<view v-if="!multiple && selectItemsMapValue.includes(item.value)">
																<uni-icons type="checkmarkempty" size="21" color="#007AFF"></uni-icons>
															</view>
														</view>
													</view>
												</template>
											</uni-list-item>
										</view>
										<view v-if="isEmpty" class="text-center padding-lg">
											暂无数据
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { getDictOptions } from "@/utils/dict";
	export default {
		name:"DictSelectActionSheet",
		emits: ['update:modelValue'],
		model: {
			prop: 'modelValue', // 对应 props msg
			event: 'update:modelValue'
		},
		props: {
			// 字典数据
			type: {
				type: String,
				required: true
			},
			modelValue: {
				type: [String, Number, Array],
				default: ''
			},
			showSelectItem: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			// 是否多选
			multiple: {
				type: Boolean,
				default: false	
			},
			// 是否可清空
			clearable: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				dictData: [],
				selectItems: [],
				screenHeight: 0,
				searchValue: '',
			};
		},
		computed: {
			contentStyles() {
				return `height: calc(${this.screenHeight}px - 200px)`;
			},
			listStyles() {
				return `height: calc(${this.screenHeight}px - 260px)`;
			},
			selectItemsMapValue(){
				return this.selectItems.map(item=>item.value) || []
			},
			// 是否空数据
			isEmpty() {
				return this.dictData.length === 0 || this.dictData.filter(item=>item.label.includes(this.searchValue)).length === 0;
			}
		},
		watch: {
			modelValue: {
                // immediate: true,
                handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if(this.modelValue instanceof Array) {
							// 找出不同的
							let diff = newVal.filter(item=>!selectItemsMapValue.includes(item))
							let diff2 = selectItemsMapValue.filter(item=>!newVal.includes(item))
							if(diff.length>0){
								diff.forEach(item => {
									const find = this.dictData.find(it => it.value == item)
									if(find) {
										this.selectItems.push(find)
									}
								});
							}
							if(diff2.length>0){
								diff2.forEach(item => {
									const find = this.selectItems.find(it => it.value == item)
									if(find) {
										this.selectItems.splice(this.selectItems.indexOf(find), 1)
									}
								});
							}
						} else {
							const find = this.dictData.find(it => it.value == newVal)
							if(find) {
								this.selectItems = [find]
							}
						}
                    }
                }
            }
		},
		mounted() {
			this.loadData()
			var that = this
			uni.getSystemInfo({
				success: function (res) {
					that.screenHeight = res.windowHeight - res.statusBarHeight
				}
			});
		},
		methods: {
			loadData() {
				this.dictData = getDictOptions(this.type)
				// 如果this.modelValue是数组
				if(this.modelValue instanceof Array) {
					this.modelValue.forEach(item => {
						const find = this.dictData.find(it => it.value == item)
						if(find) {
							this.selectItems.push(find)
						}
					});
				} else {
					const find = this.dictData.find(it => it.value == this.modelValue)
					if(find) {
						this.selectItems.push(find)
					}
				}
			},
			select(item) {
				if(this.multiple) {
					let index = this.selectItems.findIndex(it => it.value == item.value)
					if(index == -1) {
						this.selectItems.push(item)
					}
					else {
						this.selectItems.splice(index, 1)
					}
					this.$emit('update:modelValue', this.selectItemsMapValue)
					this.close()
				} else {
					this.selectItems = [item]
					this.$emit('update:modelValue', item.value)
					this.close()
				}
			},
			open(){
				this.$refs.popup.open('bottom')
			},
			close(){
				this.$refs.popup.close()
			},
			onClear() {
				this.selectItems = []
				this.$emit('update:modelValue', null)
			}
		},
	}
</script>

<style lang="scss">
	.bottom-popup {
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}
	.content {
		background-color: #F2F2F2;
	}
	.scroll-Y {
		height: 100px;
	}
</style>